{{#extend "header"}}
<title>个人中心</title>
<meta name="keywords" content="">
<meta name="description" content="">
{{/extend}}
{{#extend "style"}}
<style>
  .ui-person-info > li{
    height: 2rem;
    padding: 0 0.5rem;
    border-bottom: 1px solid #F4F4F4;
    line-height: 2rem;
  }
  .ui-person-info > li > div:first-child{
    float: left;
    color: #333;
    width: auto;
  }
  .ui-person-info > li > div.ui-detail-info{
    overflow: hidden;
    color: #999;
    text-align: right;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
  }
  .ui-person-info > li > i:nth-child(2){
    float: right;
    margin-top: 0.8rem
  }
</style>
<link rel="stylesheet" href="/css/upload_img.css" />
{{/extend}}
<body style="height: auto;background: white;">
  {{>nav title="个人中心" class="ui-shadow" }}
    <ul class="ui-person-info">
      <li style="height: 3.2rem;line-height: 3.2rem;" id="upload_pic">
        <div>头像</div>
        <i class="ui-r-g" style="margin-top: 1.4rem"></i>
        <div class="ui-detail-info">
          <div style="width: 2rem;height: 2rem;float: right;border-radius: 2rem;border: 2px solid #eee;margin-top: 0.6rem;overflow: hidden;">
            <img id='headPic' src=""/>
          </div>
        </div>
      </li>
      
      <li>
        <div>昵称</div>
        <i class="ui-r-g"></i>
        <div class="ui-detail-info">
          <input placeholder="请输入昵称" id='nickname' style="width: 100%;text-align: right;"/>
        </div>
      </li>
      
      <li>
        <div>省份</div>
        <i class="ui-r-g"></i>
        <div class="ui-detail-info">
          <select style="width: 100%;text-align: right;color: #999;"  dir="rtl" id="provinceName">
            <option>请选择</option>
          </select>
        </div>
      </li>
      
      <li>
        <div>城市</div>
        <i class="ui-r-g"></i>
        <div class="ui-detail-info">
          <select style="width: 100%;text-align: right;color: #999;"  dir="rtl" id="cityName">
            <option>请选择</option>
          </select>
        </div>
      </li>

      <li>
        <div>区县</div>
        <i class="ui-r-g"></i>
        <div class="ui-detail-info">
          <select style="width: 100%;text-align: right;color: #999;"  dir="rtl" id="countyName">
            <option>请选择</option>
          </select>
        </div>
      </li>

      <li>
        <div>详细地址</div>
        <i class="ui-r-g"></i>
        <div class="ui-detail-info">
          <input placeholder="请输入详细地址"  style="width: 100%;text-align: right;" id="address"/>
        </div>
      </li>
      
      <li>
        <div>性别</div>
        <i class="ui-r-g"></i>
        <div class="ui-detail-info">
          <select style="width: 100%;text-align: right;color: #999;"  dir="rtl" id="sex">
            <option value="1">女</option>
            <option value="2">男</option>
          </select>
        </div>
      </li>
      
      <li>
        <div>出生年月</div>
        <i class="ui-r-g"></i>
        <div class="ui-detail-info">
          <input type='date' style="width: 100%;text-align: right;" id="birthday"/>
        </div>
      </li>
      
      <!--<li>-->
        <!--<div>出身月份</div>-->
        <!--<i class="ui-r-g"></i>-->
        <!--<div class="ui-detail-info">-->
          <!--<select style="width: 100%;text-align: right;color: #999;"  dir="rtl">-->
            <!--<option>11月</option>-->
          <!--</select>-->
        <!--</div>-->
      <!--</li>-->
      <!---->
      <!--<li>-->
        <!--<div>出身日期</div>-->
        <!--<i class="ui-r-g"></i>-->
        <!--<div class="ui-detail-info">-->
          <!--<select style="width: 100%;text-align: right;color: #999;"  dir="rtl">-->
            <!--<option>20日</option>-->
          <!--</select>-->
        <!--</div>-->
      <!--</li>-->
    </ul>
    
    <div class="ui-red-botton" style="margin: 2rem auto 0.6rem; width: 13.8rem;" id="savaBtn">保存</div>


      <!--图片剪裁-->
      <div class="image-cropper-bg" id="image-cropper-bg">
          <div class="image-cropper-wrap">
              <span class="remodal-close" id="remodal-close"></span><!-- 关闭弹窗按钮 -->
              <div id="image-cropper">
                  <input type="file" class="cropit-image-input" />
                  <div class="cropit-preview"></div>

                  <div class="cropit-image-zoom-input-wrap"><span>缩放</span><input type="range" class="cropit-image-zoom-input" /></div>

                  <div style="padding-bottom: 16px">
                      <button class="rotate-ccw btn">逆时针旋转</button>&nbsp;
                      <button class="rotate-cw btn">顺时针旋转</button>
                  </div>
                  <button class="export btn" id="exportClick">上传图片</button>
              </div>
          </div>
      </div>
</body>

{{#extend "script"}}
<script src="/js/personal.js?v={{{v}}}"></script>
{{/extend}}
